## Teach Yourself ActiveX in 21 Days

- HTML—Hypertext Markup Language
  - The <OBJECT> Tag
    - Internet Explorer ActiveX Controls
- Programmatic Installation of ActiveX Controls
  - Visual Basic
  - Other Languages
- Using ActiveX Controls within Active Documents
  - Business Case
- Summary
- Q&A
- Workshop
- Quiz

#
— 16 —

##
Installing ActiveX Controls

You now have a basic familiarity with OLE, COM, and DCOM and how they relate to ActiveX controls, and you are ready to start using some of that power in your own Web Pages. In this lesson you will learn:

- About the <OBJECT> container tag.
- How to use an ActiveX Control within a Web page.
- How to add an ActiveX Control to a Visual Basic project.

You will also go through the steps involved in:

- Creating a basic Web site for a fictitious company.
- Building your first, and possibly most exciting, ActiveX Visual Basic application—a Web browser.

###
HTML—Hypertext Markup Language

Web pages are simple text documents with special commands that you can put within brackets (such as <COMMAND>). These commands tell a Web browser information about the page, such as it's title and type, and formatting information, such as what characters are bold or italic.

There are a few commands, or tags, that are common to every HTML document. The basic structure of an HTML document should contain the following information:

    <HTML>
    <HEAD>
    <TITLE>Title of your document</TITLE>
    </HEAD>
    <BODY>
    Document information…
    </BODY>
    </HTML>

As you can see, the document begins with <HTML> and ends with </HTML>. These container commands tell the browser where the document begins and where it ends. Also, within the head container tag are the title tags, defining Title of your document as the title of this HTML document. The body container comes after the head container, and defines Document information... as the body of the document. On a standard, graphical Web browser, the document would be displayed as in Figure 16.1. This is discussed in greater detail in earlier chapters.

Figure 16.1. Web view of a basic HTML document.

> > Frames Support
> > A standard for displaying several different pages (or frames) within one window was introduced by Netscape and adopted by the WWW Consortium. This feature has also been adopted in the Microsoft Internet Explorer beginning with version 3.x.
> > Using a few additional container tags (<FRAME>, <FRAMESET>, <NOFRAMES>)in place of the <BODY> container, an HTML author can customize the height, width and placement of these disparate pages.

Now you will create the Web page for your fictitious company. The scenario for creating this page follows:

- You are the newly hired Webmaster for Wonderland Industries—a manufacturer of a variety of products. Your job is to set up a Web presence for the company.
- The directory from which visitors will browse the site is on your personal machine in the C:\W3 directory.
- The default page for your particular Web server's software is index.html.

There are a few steps you must complete to create your Web page.

1. Create a directory on your hard drive called C:\W3.
2. Install the ActiveX Control Pad by double-clicking SetupPad.EXE on the enclosed CD-ROM. Windows Notepad is an excellent HTML editor, but Microsoft has developed the ActiveX Control Pad to make the insertion of ActiveX controls and scripting easier.
3. Open a window to the C:\W3 directory, then right click the empty directory and select New from the pop-up menu.
4. You will see a menu with the selection of items you can create anew. Select the one titled Internet Document (HTML) and name the new document index.html. You might be prompted as to whether or not you are sure you want this name. The answer is yes.
5. Right-click the file you just created and select the option titled Edit with ActiveX Control Pad. The ActiveX Control Pad will be launched to edit your new document.
6. Edit the document so it appears exactly as in Figure 16.2.

> > Note
> > If you do not see Internet Document (HTML) as a choice from the pop-up menu, install the HTML Wizard from the enclosed CD-ROM.

Figure 16.2. Home page viewed with ActiveX Control Pad.

Now you have created the initial home page for your company. Double-click the desktop icon for C:\W3\index.html to launch your Web browser, and you will be able to see the document as it will appear on the Web (see Figure 16.3).

Figure 16.3. Home page viewed with a Web browser. Bare as it might seem, many businesses start with a page much like this one.

This is a fairly simple page, and is similar to the first page with which many businesses begin their Web presence. HTML provides many more typesetting and other formatting options to customize the display of text. However, even with an e-mail hyperlink, the page lacks activity.

####
The <OBJECT> Tag

The <IMG> tag was the first to enable basic multimedia within an HTML document. Using a command such as <IMG SRC=image.gif> allows you to place a static image within a document.

The <OBJECT> tag , once known as the <INSERT> tag, is a container tag. This means that whenever it is used within a hypertext document, there will be an <OBJECT> tag at the beginning of the object and a </OBJECT> tag at the end of the object. The space between the tags is where you code the properties and parameters of the object.

> > NOTE
> > The home of the World Wide Web Consortium is located at http://www.w3.org. You can find Internet specifications and other information at this site.

The World Wide Web Consortium (the organization that defines the standards for Internet operations) established the <OBJECT> tag to enable rich forms of media content within Web pages. Using the object tag, one can specify the MIME (Multimedia Internet Mail Extension) type for the object.

Using the <OBJECT> tag, you can add active content to your home page. In your Wonderland example, you will add a PowerPoint Presentation to enhance the look and feel of the page.

The <OBJECT> Tag

<OBJECT> </Object>

The object tag is part of the HTML 3.2 specification for hypertext documents. It is used to make OLE and multimedia content available in HTML pages over the Internet or over an intranet. Within this container tag, any parameters for the current instance of the control are defined.

    <Object
     ID="MyControl"
     Width=640
     Height=480
     ClassID="CLSID:hhhhhhhh-hhhh-hhhh-hhhh-hhhhhhhhhhhh"
     CODEBASE="ftp://ftp.domain.net/mycontrol.ocx#version=xx,xx,xx,xx x"
     Type="application/x-oleobject"
    >
    <Param Name="Enbaled" Value="True">
    </Object>

To do this, you must first copy the PowerPoint animation that your Public Relations Director, White Rabbit, gave you for your Web directory. (You'll find a copy on the enclosed CD-ROM at \W3\wndrland.ppz. Copy that file to C:\W3 on your local hard drive.)

Now that you have a copy of the presentation, you need to write an HTML document within which browsers can view the animation. To do this, create a basic HTML document with a basic <OBJECT> tag defining the presentation's properties.

First, define the ClassID parameter for a PowerPoint Animation. Then, define the size of the presentation. The format for the ClassID is

    ClassID = "clsid:[Class ID]"

The <OBJECT> tag for the White Rabbit's Powerpoint animation within the HTML document should look like this:

    <OBJECT
     CLASSID="clsid:EFBD14F0-6BFB-11CF-9177-00805F8813FF"
     WIDTH=640
     HEIGHT=480>
    <PARAM NAME="File" VALUE="wndrland.ppz">
    </OBJECT>

> > How to Determine an Object's ClassID
> > There are a variety of methods one can use to determine an object's ClassID
> > In the wndrLand.ppz example, you used the free Internet Assistant for Powerpoint (IA4PPT95.exe on the enclosed CD-ROM) to determine the ClassID for a PowerPoint animation (.PPZ). After you created your presentation, you selected Export for Internet—Powerpoint Animation from the File menu.
> > Another way to determine the ClassID of a control or object is to use the Visual Basic IDE to create a project and add the item reference or control to it. Then, viewing the project file with a text editor, such as Notepad, you can see what CLSID was used in the .VBP file.
> > If you are familiar with the registry settings, you can use Windows RegEdit to look for the CLSID of the control you wish to use.
> > The best way to get the CLSID of an ActiveX Control is to use the ActiveX Control Pad to insert your control into a Web page. The Control Pad will insert the CLSID and any necessary parameters into your document.

Now you will create a Web page for Mr. Rabbit's presentation and create a link to it in the Wonderland home page. To do this, create a basic HTML document and insert the <OBJECT> tag for the presentation into the page. Call the HTML document wndrland.html. Use the following code to create the new page.

    <HTML>
    <HEAD><TITLE>About Wonderland</TITLE></HEAD>
    <BODY>
    <CENTER>
    <OBJECT
     CLASSID="clsid:EFBD14F0-6BFB-11CF-9177-00805F8813FF"
     WIDTH=640
     HEIGHT=480>
    <PARAM NAME="File" VALUE="wndrland.ppz">
    </OBJECT>
    </CENTER>
    <HR>
    Click <A HREF="wndrland.ppz">here</A> to view the presentation with Powerpoint
    </BODY>
    </HTML>

#####
Internet Explorer ActiveX Controls

When you have made it this far, you will be able to insert very powerful active content into an HTML document. The preceding example, using a PowerPoint animation, is fairly simple and, as you can see, requires no scripting. However, it requires the user to have the very large PowerPoint Viewer (or PowerPoint itself) installed on the local machine.

Lets work with some slightly smaller, but more commonly used, ActiveX controls. These controls are installed from the AXDist.exe file in the ActiveX SDK on the enclosed CD-ROM. The latest versions can be downloaded from Microsoft's ActiveX Server (the URL is http://www.microsoft.com/intdev/sdk). These controls provide dialog, display and command features that are not normally part of an HTML document.

######
The CyberTime Page

Three useful ActiveX controls are the label, timer and pop-up window controls.

To learn how these controls are used, you'll create an HTML file that displays the current time, and retrieves the current time from the U.S. Department of Commerce Atomic Time Server (cool, eh?). Using Windows Notepad or the ActiveX Control Pad, you will create a text file that begins like this:

    <HTML>
    <Head> <title>CyberTime</Title> </Head>
    <Body>

Next, insert a label control called, "lblClock" into the document. Notice that you use the type attribute to identify the MIME type of the control as an OLE object. The CODEBASE attribute tells the user's browser where it can obtain a copy of the control. All this is done using the <OBJECT> container tag:

    <OBJECT
     ID="lblClock"
     WIDTH=400
     HEIGHT=25
     CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
     CODEBASE="http://activex.microsoft.com/controls/iexplorer/ielabel.ocx"
    >

After you finish, this the control is automatically created on the local machine. However, you still need to define the parameters of the particular object like so:

    <PARAM NAME="Caption" VALUE="Dept. of Commerce Time Server">
    <PARAM NAME="FontName" VALUE="Arial">
    <PARAM NAME="FontBold" VALUE="1">
    <PARAM NAME="FontSize" VALUE="12">
    <PARAM NAME="backcolor" VALUE="1">
    <PARAM NAME="forecolor" VALUE="1">
    <PARAM NAME="Alignment" VALUE="Left">

Finally, don't forget to use the closing </Object> tag to avoid unpredictable results. That's all there is to inserting an ActiveX control.

> > Warning

> > Although you can create and edit controls and scripts by clicking the left margin, you may still need to edit the properties, values, and parameters manually in the Control Pad window. To do this, click the Script or Object icon in the left margin, set any values allowed through the Control Pad’s interface, then exit the Control Editor and return to the Control Pad window. Now you can modify, add or delete whichever properties you need. Also, be careful about going back to the left-margin icon to edit your control or script. The wizard may zap any changes you made that it doesn’t recognize.

Now you'll add a timer control to the page . Both the label and the timer controls should be very familiar to Visual Basic programmers. The timer control is added in much the same way as the label control:

    <Object
     ID="Timer"
     ClassID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
     CodeBase="http://activex.microsoft.com/controls/iexplorer/ietimer.ocx"
     Type=application/x-oleobject"
     Align=Middle
    >
     <Param Name="Interval" Value="100">
     <Param Name="Enbaled" Value="True">
    </Object>

Finally you'll add a new control, the pop-up window. This cute little utility displays an HTML file in a temporary window. The window will display all the formatting correctly, and disappears when the user clicks the screen. The <OBJECT> tag for this control looks like this:

    <Object
     ID="PopUpWindow"
     ClassID="clsid:A23D7C20-CABA-11CF-A5D4-00AA00A47DD2"
     CodeBase="http://activex.microsoft.com/controls/iexplorer/iepopwnd.ocx"
     Type="application/x-oleobject"
    > </Object>

After you have all the objects in place, add a bit of code that displays the information from the U.S. Department of Commerce's atomic clock when the user clicks the time:

    <SCRIPT LANGUAGE="VBScript">
    <!--
    Sub lblClock_Click
     PopUpWindow.Popup "http://132.163.135.130:14/"
    End Sub
    Sub Timer_Timer()
     lblClock.caption=time
    End Sub
    -->
    </SCRIPT>

When you've entered all this code, you will have a Web page that displays the local time and, when the user clicks the time, information from an atomic clock is displayed in a pop-up window (See Figure 16.4). A working example of this page can be found in the \W3\ directory of your CD-ROM in the file titled CyberTime.html.

Figure 16.4. A browser view of a CyberTime page using ActiveX controls.

###
Programmatic Installation of ActiveX Controls

Now that you know how an HTML author uses ActiveX controls, you can get acquainted with how a programmer uses them. Remember, though, that the use of ActiveX controls is not limited to Web browsers and programming languages. They can be used by any program that uses OLE (such as Word or Excel).

####
Visual Basic

Installation of an ActiveX control into a Visual Basic project is exactly the same as with any other custom control. In this section, you will create a Web browser using the HTML control from the Internet Control Pack (ICP) on the enclosed CD-ROM. If you have not already installed the ICP, simply double click the MSICPB.exe file on the CD-ROM, and when the installation is complete, reboot your computer to allow changes to take effect.

After you install the ICP, create a new Visual Basic project called WebView.vbp. This will be Wonderland's corporate Web browser.

With the project loaded into Visual Basic, press Ctl+T to see what objects and controls are referenced (see Figure 16.5). Clear the check box next to each control except for the Microsoft HTML Client Control control—that one should be checked. This will remove any unnecessary controls from, and add the HTML control to, the Visual Basic toolbox.

Figure 16.5. Visual Basic project with the Microsoft HTML Client Control loaded.

Next, insert the control into a form. You should also change the form's caption, identifying it as the Wonderland Web Browser. Add two menu items, File Exit and View Source, an empty text box, and a command button labeled &Go. The form should appear as in Figure 16.6.

Figure 16.6. Form layout for the Wonderland Web Browser.

Add a bit of code to support the browser activities. The code for the important subroutines of the Web browser follows, but you can add other features to meet your needs.

    Private Sub Command1_Click()
     HTML1.RequestDoc Text1.Text
    End Sub
    Private Sub mnuFileExit_Click()
     End
    End Sub
    Private Sub mnuViewSource()
     Select Case mnuViewSource.Checked
     Case True
     mnuViewSource.Checked=False
     HTML1.ViewSource = False
     Case False
     mnuViewSource.Checked = True
     HTML1.ViewSource = True
     End Select
    End Sub

As you can see, most of the work is done by the HTML control. The only thing you really needed to code was one menu option to exit the program, and another menu option to toggle between Code View, and Web View modes.

> > Registering Controls with RegSvr32.exe
> > Before most other applications can use the features of a control (.DLL or .OCX), the control must be added to the system registry. You can manually view and edit the system registry using the RegEdit.exe file that comes with Windows.
> > The system registry contains a great deal of information about your system, it's configuration, and the software installed on it. Editing the registry can be quite complicated—especially if you are not very familiar with it.
> > To make the registration of OLE controls easier, Microsoft provides the RegSvr32.exe utility. There might be several copies of this file on your machine, so make sure that the most recent one is in your C:\Windows directory.
> > The rules for using the utility are pretty much self explanatory. To register the OLE server, use:

> >     RegSvr32 [DLL or OCX Filename]

> > This will register the OLE Server.
> > You can also use the optional command line parameter to unregister an OLE Server as necessary:

> >     RegSvr32 /u [DLL or OCX Filename]

> > Finally, you can use a parameter to force the program into "silent" mode. This is useful for processes where you may not want the user to be bothered with the results of the registration process. Use this option sparingly, though. You wouldn’t have tried to register a control unless you expected it to succeed. If it doesn’t work there may be other actions you will want to take.

When you have added all the controls and coded the program, you are ready to browse simple Web documents. Because this program uses the simple Microsoft HTML control, the program does not yet support all of ActiveX. This is not a bug, though. The HTML control is a very powerful ActiveX control, and you can program many advanced features into the project using it.

For example, you added a menu item to allow the viewing of source code for HTML pages. By clicking the View|Source menu item, you can toggle between Code View and Web View. For those of you who have learned HTML by observing the ways that other people do it, this can be a very valuable learning tool!

####
Other Languages

Installation of an ActiveX control into IDE's other than Visual Basic projects is different for each language. If you can use a custom control in your favorite programming language, you should have no problem using ActiveX controls because they install like any other custom control.

###
Using ActiveX Controls within Active Documents

As I mentioned earlier, the quickest, cheapest, easiest way to acquire ActiveX controls is by browsing an ActiveX document with an ActiveX browser, such as MSIE. To better understand this, you will create a Web document for your fictitious company that contains a redistributable ActiveX control.

In the example with the PowerPoint presentation, you used an inserted control and a linked object. Remember that an object (such as a Powerpoint presentation) must be controlled by something (such as the PowerPoint program or the free PowerPoint viewer). In that example, you referenced the control via the ClassID (already installed on the user's machine), then pointed toward the specific animation via the File parameter .

In the following scenario, the powers that be at Wonderland Industries have asked you to create another Web page.

####
Business Case

The queen of hearts has asked you to develop a page for her gaming division. She would like a home page that allows users to select a site to view from a list of sites.

On this Web page, she wants a list box showing several other entertainment sites. Your task is to create a Web page that allows users with ActiveX browsers to select a site from the list and be transported to the new site . This can be done with HTML alone, but for learning purposes, you'll do it in ActiveX. To accomplish this, complete the following steps:

1. To begin, create a blank HTML page (hearts.html). Include the basic HTML tags (<HTML>, <HEAD>, <TITLE> and <BODY>). The title of the document is Hearts Gaming.

   The <HTML> Tag

   <HTML> </HTML>

   This container tag defines the beginning and ending of a hypertext document. Each HTML document should have <HEAD>, <TITLE> and <BODY> containers:

       <HTML>
       <Head>
       <Title>My Document</Title>
       </Head>
       <Body>
       My Content
       </Body>
       </HTML>

   In place of a <BODY> container, your document can have a <FRAMESET> container:

       <HTML>
       <Head>
       <Title>My Document (Frames Version)</Title>
       <Base Target=_top>
       </Head>
       <FrameSet Rows="85%, 15%">
       <FrameSet Cols="15%,85%">
       <Frame
        SRC="TopLeft.html"
        Name="fmTopLeft">
       <Frame
        SRC="TopRight.html"
        Name="fmTopRight">
       </FrameSet>
       <Frame
        SRC="Bottom.html"
        Name="fmBottom">
       </FrameSet>
       <NoFrames>To view this page, you must have &quotFrames&quot enabled.</NoFrames>
       </HTML>

2. Now, using the ActiveX Control Pad, add a list box control to the file. To do this, select the menu option Edit|Insert ActiveX Control. This displays a window that lists all ActiveX controls and OLE objects currently installed on your system. Select the Microsoft Forms List Box control from the list of object types.
   When you select the control you want to insert into your document, the Object Type dialog box is replaced by two new windows, Properties and Edit ActiveX Control. For the list box control, only customize a few of the properties—height and width, and ID.
3. Set the height and width properties to 128 and 256 respectively. This gives the list box the correct proportions to show all of the sites you'll be listing. Change the ID property to URLList.
4. When you've set these properties, close both the Properties and the Edit ActiveX Control windows to return to the ActiveX Control Pad's editing window. You should see that an <OBJECT> tag container has been added with a variety of parameters defined (see Figure 16.7).

Figure 16.7. The <OBJECT> tag for the list box control as created within the ActiveX Control Pad. You can manually edit the properties for the object parameters without returning to the dialog boxes. If you want to use the dialog boxes to help you edit the parameters after you've already returned to the document, click the icon displayed in the left margin of the editor next to the opening <OBJECT> tag.

Next, add code to fill the list box. You'll use this control to list the sites that the queen wants her visitors to be able to view.

Even though you've added these objects to the form, there is no code behind them. You must add a script that will populate the list box with the queen's URLs. For this, you'll add a bit of VBScript (which you learned about earlier).

    <SCRIPT LANGUAGE="VBScript">
    <!--
    Sub Window_onLoad()
     URLList.Enabled = True
     URLList.Additem "Yahoo Games"
     URLList.Additem "Nintendo"
     URLList.Additem "Sierra On-Line"
     URLList.Additem "Disney"
    end sub
    -->
    </SCRIPT>

Finally, add a bit of code to tell the browser to jump to the associated URL when the user double-clicks an item within the text box:

    <SCRIPT LANGUAGE="VBScript">
    <!--
    Sub URLList_DblClick(ByVal Cancel)
     Select Case URLList.text
     Case "Yahoo Games"
     Dim strLocation as String
     strLocation="http://www.yahoo.com/Entertainment/Cool_Links/Games/"
     Window.location.href = strLocation
     Case "Nintendo"
     Window.location.href = "http://www.nintendo.com"
     Case "NCompass Labs"
     Window.location.href = "http://www.sierra.com"
     Case "WWW Consortium"
     Window.location.href = "http://www.disney.com"
     End Select
    end sub
    -->
    </SCRIPT>

When you finish with the HEARTS.HTML page, your completed project should resemble the \W3\HEARTS.HTML file on the on the enclosed CD-ROM. You will have created an ActiveX-enabled Web page with an embedded control. For this page, the user must have the list box control already installed on his machine. The next chapter discusses ActiveX control downloading to distribute controls over the network.

###
Summary

In this chapter, you have learned about the <OBJECT> container tag and how it is used to insert active content into an HTML page. This feature allows an HTML author to reference objects that are installed on a user's machine. It also provides an object against which a VB or Java script can act.

You have also learned the basics of using an ActiveX control within a programming environment such as Visual Basic. Using an ActiveX control exactly like any other custom control you can create your own proprietary, standalone Internet applications and distribute them to your users.

###
Q&A

- Q What is the significance of a ClassID?
- A A ClassID is the unique code assigned to an OLE control. This lengthy number is used by OLE-enabled applications to identify its installation on a local machine.
- Q Can I use ActiveX controls in any old programming language?
- A No. ActiveX controls are usable in an OLE container application such as MSIE, Visual C++ or Visual Basic, not within programming environments that do not support of OLE functionality, such as Turbo Basic version 1.
- Q How can I tell whether or not a custom control is an ActiveX control?
- A It's very difficult for the new programmer to tell whether a custom control is based on the DCOM model. Basically, you must rely on the developer to identify it as such. If you are familiar with building OLE controls, you can determine whether a suspect control is ActiveX compatible by checking for the existence of the Iunknown interface, and seeing whether it has self-registering routines within it.
- Q Must a control on a Web page be an ActiveX control?
- A No, but other controls can be unreliable over a network connection—especially a slow connection. ActiveX (or DCOM OLE) considers the unavailability of remote data or data sources, whereas other controls might not. In the hearts example in this chapter, you used a list box control that is not a true ActiveX control. Because the data you used to work with the control was contained within the HTML page, you did not need to worry about whether or not data at a remote site would be available and could therefore use the control safely.

###
Workshop

Create a Web page with the following items inserted as ActiveX Objects:

1. List box
2. Text box
3. Video (.AVI)

###
Quiz

> > Note
> > Refer to the Appendix, "Answers to Quiz Questions," for the answers to these questions.

1. What are the 4 container tags required in every HTML document?
2. Which of the required container tags can be replaced by the <FRAME> tags?
3. What container tag, formerly known as the <INSERT> tag is required for the use of ActiveX Controls?
4. What are two items in an HTML page that have a graphical icon in the margin of the ActiveX Control Pad?
5. What two parameters within the <OBJECT> tag define the size of the object?
6. What was the first tag to allow multimedia content within an HTML Document?
7. What organization publishes the standards for HTML tags?
8. What hotkey combination within Visual Basic allows a programmer to define what controls are loaded into a Visual Basic project?
9. What utility is used to register and unregister controls on a PC?
10. Must an ActiveX HTML author define the location where an ActiveX Control can be downloaded?